<template>
  <div class="product-list-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2>产品列表</h2>
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>

    <!-- 操作栏 -->
    <div class="operation-bar">
      <el-button type="success" @click="openDialog('add')">新增产品</el-button>
      
      <div class="batch-opt">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-button type="text" @click="handleBatchOpt">批量操作</el-button>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-bar">
      <span>筛选：</span>
      <el-checkbox-group v-model="filterTags" @change="handleFilter">
        <el-checkbox label="品牌A">品牌A</el-checkbox>
        <el-checkbox label="品牌B">品牌B</el-checkbox>
        <el-checkbox label="品牌C">品牌C</el-checkbox>
        <el-checkbox label="单品">单品</el-checkbox>
        <el-checkbox label="套盒">套盒</el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 产品表格 -->
    <el-table
      :data="filteredProducts"
      border
      stripe
      style="width: 100%; margin-top: 16px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="serial" label="序号" width="80" align="center" />
      <el-table-column prop="productNo" label="产品编号" align="center" />
      <el-table-column prop="productName" label="产品名称" align="center" />
      <el-table-column prop="brand" label="归属品牌" align="center" />
      <el-table-column prop="spec" label="规格" align="center" />
      <el-table-column prop="type" label="类型" align="center" />
      <el-table-column prop="stock" label="库存" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            type="primary"
           
            @click="openDialog('edit', scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
           
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      destroy-on-close
    >
      <el-form
        ref="productFormRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        size="default"
      >
        <el-form-item label="产品编号" prop="productNo">
          <el-input
            v-model="formData.productNo"
            placeholder="请输入产品编号"
            :disabled="dialogType === 'edit'"
          />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="formData.productName"
            placeholder="请输入产品名称"
          />
        </el-form-item>
        <el-form-item label="归属品牌" prop="brand">
          <el-input
            v-model="formData.brand"
            placeholder="请输入归属品牌"
          />
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input
            v-model="formData.spec"
            placeholder="请输入规格"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select
            v-model="formData.type"
            placeholder="请选择类型"
          >
            <el-option label="单品" value="单品" />
            <el-option label="套盒" value="套盒" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input-number
            v-model="formData.stock"
            :min="0"
            placeholder="请输入库存"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >
          {{ dialogType === 'add' ? '新增' : '保存' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 产品列表数据
const productList = ref([
  {
    serial: 1,
    productNo: '45451',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '单品',
    stock: 65426
  },
  {
    serial: 2,
    productNo: '451415',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '套盒',
    stock: 65426
  },
  {
    serial: 3,
    productNo: '4545',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '套盒',
    stock: 65426
  }
])

// 筛选标签
const filterTags = ref([])
// 全选状态
const checkAll = ref(false)
// 选中的产品（批量操作）
const selectedProducts = ref([])

// 筛选后的产品列表
const filteredProducts = computed(() => {
  if (filterTags.value.length === 0) return productList.value
  return productList.value.filter(item => {
    // 匹配品牌或类型
    return filterTags.value.includes(item.brand) || filterTags.value.includes(item.type)
  })
})

// 对话框状态
const dialogVisible = ref(false)
const dialogType = ref('add') // add/edit
const dialogTitle = ref('新增产品')
// 表单数据
const formData = reactive({
  productNo: '',
  productName: '',
  brand: '',
  spec: '',
  type: '',
  stock: 0
})
// 表单验证规则
const formRules = reactive({
  productNo: [
    { required: true, message: '请输入产品编号', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  brand: [
    { required: true, message: '请输入归属品牌', trigger: 'blur' }
  ],
  spec: [
    { required: true, message: '请输入规格', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择类型', trigger: 'change' }
  ],
  stock: [
    { required: true, message: '请输入库存', trigger: 'blur' }
  ]
})
// 表单引用
const productFormRef = ref(null)

// 页面初始化
onMounted(() => {
  // 实际项目中可在此处请求接口获取产品列表
})

// 返回操作
const handleBack = () => {
  window.history.back()
}

// 全选事件
const handleCheckAllChange = (val) => {
  checkAll.value = val
  // 实际项目中需配合表格的全选逻辑，此处简化
}

// 批量操作
const handleBatchOpt = () => {
  if (selectedProducts.value.length === 0) {
    ElMessage.warning('请选择需要操作的产品')
    return
  }
  ElMessageBox.confirm(
    '确定对选中产品执行批量操作吗？',
    '提示',
    { type: 'warning' }
  ).then(() => {
    ElMessage.success('批量操作成功')
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 筛选事件
const handleFilter = () => {
  // 筛选逻辑已通过computed实现
  ElMessage.success('筛选成功')
}

// 表格选中事件
const handleSelectionChange = (val) => {
  selectedProducts.value = val
  checkAll.value = val.length === filteredProducts.value.length
}

// 打开对话框（新增/编辑）
const openDialog = (type, row = null) => {
  dialogType.value = type
  dialogTitle.value = type === 'add' ? '新增产品' : '编辑产品'
  
  // 重置表单
  if (productFormRef.value) {
    productFormRef.value.resetFields()
  }

  // 编辑时填充数据
  if (type === 'edit' && row) {
    Object.assign(formData, row)
  } else {
    // 新增时重置数据
    formData.productNo = ''
    formData.productName = ''
    formData.brand = ''
    formData.spec = ''
    formData.type = ''
    formData.stock = 0
  }

  dialogVisible.value = true
}

// 保存产品（新增/编辑）
const handleSave = () => {
  productFormRef.value.validate(async (valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        // 新增逻辑
        const newProduct = {
          serial: productList.value.length + 1,
          ...formData
        }
        productList.value.push(newProduct)
        ElMessage.success('产品新增成功')
      } else {
        // 编辑逻辑
        const index = productList.value.findIndex(
          item => item.productNo === formData.productNo
        )
        if (index !== -1) {
          productList.value[index] = { ...formData }
          ElMessage.success('产品编辑成功')
        }
      }
      dialogVisible.value = false
    }
  })
}

// 删除产品
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '此操作将永久删除该产品，是否继续？',
    '提示',
    { type: 'warning' }
  ).then(() => {
    productList.value = productList.value.filter(
      item => item.productNo !== row.productNo
    )
    ElMessage.success('产品删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<style scoped>
.product-list-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.batch-opt {
  display: flex;
  gap: 10px;
  align-items: center;
}

.filter-bar {
  padding: 12px 0;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 适配截图中的按钮样式 */
::v-deep .el-button--primary {
  background-color: #00b38a;
  border-color: #00b38a;
}

::v-deep .el-button--danger {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}
</style>